<template>
	<view>
		<view class="uni-flex u-f-ajc">
			<view>序号</view>
			<view>毕业设计题目</view>
			<view>指导老师</view>
			<view>剩余人数</view>
		</view>
		<block v-for="(item,index) in list" :key="index">
		 	<view class="uni-flex-u"   @tap="Change(index,item.id)" :class="{'active':tabIndex==index}">
				<view>{{item.id}}</view>
				<view>{{item.title}}</view>
				<view>{{item.teacher}}</view>
				<view>{{item.nums}}</view>
		 	</view>
		</block>
		<uni-popup :show="showpopup1" position="middle" mode="fixed"@hidePopup="hidePopup1">
			<view class="gonggao">
				<view>
				<text>序号:</text>{{id}}
				</view>
				<view>
					<text>毕业设计题目:</text>{{title}}
				</view>
				<view>
					<text>指导老师:</text>{{teacher}}
				</view>
				<view>
					<text>要求</text>{{desc}}
				</view>
				
				<button type="default" @tap="hidePopup1">关闭</button>
			</view>
		</uni-popup>
		<view class="btn">
			<button type="default" @tap="submitClass" v-bind:disabled="dis"> 确认选课</button>
		</view>

	</view>
</template>

<script>
	import uniPopup from '../../components/uni-popup/uni-popup.vue'
	export default {
		components:{
			uniPopup
			
		},
		data() {
			return {
				dis:false,
				code:'',
				classes:["18计算机一班","18计算机二班","18计算机三班","18计算机四班",],
				showpopup1:false,
				showpopup2:false,
				index1:-1,
				id:0,
				title:'',
				teacher:'',
				nums:'',
				cits:'',
				desc:'',
				tabIndex:-1,
				list:[],
				namecode:''
			}
		},
		onLoad(){
			// this.getCode();
			this.namecode =localStorage.getItem('namecode')
			uni.request({
			    url: '/graduate_api/api_18/getSinfo.php', //仅为示例，并非真实接口地址。
				method:"POST",
			    data: { 
					code:this.namecode,
			    },
			    success: (res) => {
						if(res.data.code==201){
							uni.reLaunch({
								url:'../info/info'
							})
						}
						
			    }
			});
			uni.request({
			    url: '/graduate_api/api_18/getList.php', //仅为示例，并非真实接口地址。
				method:"POST",
			    data: { 
					code:this.namecode,
			    },
			    success: (res) => {
						console.log(res.data);
						this.list = res.data;
						
			    }
			});
		},
		methods: {
			// 确认选课
			submitClass(e){
				this.dis=true;
				console.log(this.id);
				console.log(this.namecode);
				uni.request({
					    url: '/graduate_api/api_18/selectClass.php', //仅为示例，并非真实接口地址。
						method:"POST",
					    data: { 
							code:this.namecode,
							id:this.id
					    },
					    success: (res) => {
							if(res.data.code==200){
								uni.showToast({
								   title: "选课成功,即将跳转登录页面",
								   duration:2000
								});
								setTimeout(function(){
									uni.redirectTo({
										url:"../login/login"
									})
								},2000);
							}else{
								uni.showToast({
								   title: "选课失败",
								   duration:500
								});
								setTimeout(function(){
									window.location.reload();
								},500);
							}
								
					    }
					});
			},
			
			
			//隐藏弹窗
			hidePopup1(){	
				this.showpopup1=!this.showpopup1
			},
			
			
			Change(index,id){
				// console.log(index)
				this.tabIndex=index;
				this.hidePopup1();
				this.id=id;
				this.teacher=JSON.stringify(this.list[index].teacher)
				// this.id=JSON.stringify(this.list[index].id)
				this.cits=JSON.stringify(this.list[index].cits)
				this.nums=JSON.stringify(this.list[index].nums)
				this.desc=JSON.stringify(this.list[index].desc)
				this.title=JSON.stringify(this.list[index].title)
			},
			
		}
	}
</script>

<style scoped>
	.uni-flex-u,.u-f-ajc{
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	.uni-flex-u view{
		width: 25%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		border-bottom: 1px solid #ccc;
		overflow: hidden;
	}
	.uni-flex view {
		width: 25%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		flex-wrap: wrap;
		background: #d2f1f0;
		margin: 10px 0 ;
	}
	.gonggao{
		width: 250px;
	}
	.gonggao view text{
		font-size: 16px;
		font-weight: bold;
	}
	.gonggao button{
		margin-top: 20upx;
		background:#63a7ff ;
		color: #171606 ;
	}
	.active{
		background:#d2f1f0 ;
	}
	.btn button{
		display: flex;
		justify-content: center;
		width: 70%;
		background: #63A7FF;
		color: #fff;
		margin-top: 80px;
		
	}
	.select-class{
		width: 100%;
		height: 300px;
		padding: 20px;
	}
</style>
